CSS 盒模型

标准模型+IE 模型

标准: margin padding border content
IE模型: 宽高包括 padding border

标准模型/IE 区别 计算宽高不同

标准: 宽度不包括padding border
IE模型: 宽高包括 padding border

CSS 如何设置这两种模型

box-sizing:content-box  //标准 浏览器默认
box-sizing:border-box   //IE

js 如何设置获取盒模型对应的宽高

dom.style.width/height  只能取dom节点的内敛属性, link style节点这两种方式不支持
dom.currentStyle.width/height 三种方法，浏览器计算之后相对准确的  缺：只有IE支持
window.getComputedStyle(dom).width/height 兼容性好
dom.getBoundingClientRect().width/height 绝对位置 相对viewport的left top width height四个值

盒模型解释边距重叠

BFC(边距重叠解决)

基本概念：块级格式化上下文 原理(渲染规则) 1: 同一个 BFC 内在垂直方向上会发生重叠 2: BFC 区域不会与浮动元素的 box 重叠 3: BFC 是个独立，外面元素不会影响到里面的，反过来也成立 4: 计算 BFC 高度的时候，浮动元素也参与计算 如何创建 BFC 1: float != none 2: position != static/relative 3: display == table 系列 table-cell、table-caption 4: overflow != visibile

为什么有 BFC

• 浏览器渲染过程中，会遇到一些问题，
  • 1、被浮动包裹的父容器没有高度
  • 2、同一个 BFC 内在垂直方向上会发生重叠
  • 3、多栏布局，浮动与未浮动元素发生覆盖

BFC 定义

• 页面隔离的容器，内部元素和外部元素不会相互影响

BFC解决了那些问题

• 1、浮动父容器没高度：浮动元素也参与高度计算，父容器 float: left; 或者 overflow: hidden; table: table-cell
• 2、垂直方向重叠：创建两个 BFC, overflow: hidden; 或者 display: inline-block;
• 3、BFC 区域不会与浮动元素的 box 重叠

清除浮动

浮动元素脱离文档流，导致父元素管不了，父元素高度坍塌问题

• 父级也设置 浮动、设置高度、父级增加 定位 position: absolute
• overflow:hidden
• 末尾增加空元素进行clear clear: both
• 给父级添加伪元素进行clear